<template>
	<div class="index">
		<u-modal v-model="show" :show-title="false" :show-confirm-button="false" mask-close-able>
			<view class="slot-content">
				<image show-menu-by-longpress class="img" :src="imgUrl" />
				<div class="canvas-hide">
					<!-- #ifdef MP-WEIXIN -->
					<canvas id="canvas" type="2d" style="width: 600px; height: 960px" />
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<canvas canvas-id="canvas" id="canvas" style="width: 600px; height: 960px" />
					<!-- #endif -->
				</div>
				<view style="margin: 15rpx 0;color: red;">
					长按保存图片
				</view>
			</view>
		</u-modal>
	</div>
</template>
<script>
	// 引入绘制插件
	import DrawPoster from "@/js_sdk/u-draw-poster";

	export default {
		data: () => ({
			imgUrl: "", //绘制出来的图片路径
			show: false, //是否展示模态框
			dp: {}, //绘制的dp对象，用于存储绘制等一些方法。
			logo: require("@/pages/passport/static/logo-title.png"), //本地logo地址
		}),

		props: {
			/**
			 * 父级传参的数据
			 */
			res: {
				type: null,
				default: "",
			},
		},
		onUnload() {},

		methods: {
			/**
			 * 解决微信小程序中图片模糊问题
			 */
			// #ifdef MP-WEIXIN
			st2: (size) => size * 2,
			// #endif

			// #ifndef MP-WEIXIN
			st2: (size) => size,
			// #endif

			/**
			 * 保存图片
			 */
			downLoad() {
				uni.saveImageToPhotosAlbum({
					filePath: this.imgUrl,
					success: function() {
						uni.showToast({
							title: "保存成功！",
							icon: "none",
						});
					},
					fail: function() {
						uni.showToast({
							title: "保存失败，请稍后重试！",
							icon: "none",
						});
					},
				});
			},

			/**
			 * 创建canvas
			 */
			async init() {
				this.show = true;
				this.dp = await DrawPoster.build({
					selector: "canvas",
					componentThis: this,
					loading: true,
					debugging: true,
				});
				let dp = this.dp;
				// #ifdef MP-WEIXIN
				// 用于微信小程序中画布错乱问题
				dp.canvas.width = this.st2(600);
				dp.canvas.height = this.st2(720);
				// #endif
				this.draw(dp);
			},

			async draw(dp) {
				const {
					width,
					height,
					background,
					title
				} = this.res.container;
				const {
					code,
					img,
					price
				} = this.res.bottom;

				// /** 绘制背景 */
				await dp.draw((ctx) => {
					ctx.fillStyle = background;
					ctx.fillRoundRect(
						this.st2(0),
						this.st2(0),
						this.st2(width),
						this.st2(height),
						this.st2(12)
					);
					ctx.clip();
				});
				/** 绘制图片 */
				dp.draw(async (ctx) => {
					await Promise.all([
						// 绘制Logo
						// ctx.drawImage(
						// 	this.logo,
						// 	this.st2(175),
						// 	this.st2(0),
						// 	this.st2(256),
						// 	this.st2(144)
						// ),
						// 中间图片
						ctx.drawImage(
							img,
							this.st2(20),
							this.st2(20),
							this.st2(560),
							this.st2(560)
						),
						// 二维码
						// ctx.drawImage(
						// 	code,
						// 	this.st2(39),
						// 	this.st2(750),
						// 	this.st2(150),
						// 	this.st2(150)
						// ),
					]);
				});

				/** 绘制中间文字*/
				await dp.draw((ctx) => {
					ctx.fillStyle = "#333";
					ctx.font = `bold ${this.st2(24)}px PingFang SC`;
					ctx.textAlign = "center";
					ctx.fillWarpText({
						text: title,
						maxWidth: this.st2(560),
						x: this.st2(300),
						y: this.st2(620),
						layer: 1,
					});

					ctx.fillStyle = "#ff3c2a";
					ctx.font = `${this.st2(38)}px PingFang SC`;
					ctx.textAlign = "center";
					ctx.fillText(price, this.st2(300), this.st2(680));
				});

				// /** 绘制底部文字 */
				// await dp.draw((ctx) => {
				// 	ctx.fillStyle = "#666";
				// 	ctx.font = `${this.st2(24)}px PingFang SC`;
				// 	ctx.fillText("长按图片，识别二维码", this.st2(200), this.st2(866));
				// 	ctx.fillStyle = "#666";
				// 	ctx.font = `${this.st2(24)}px PingFang SC`;
				// 	ctx.fillText("查看商品详情", this.st2(200), this.st2(900));
				// });

				this.imgUrl = await dp.createImagePath();

				// console.log(posterImgUrl)
			},
		},

		async mounted() {
			this.init();
		},
	};
</script>

<style lang="scss" scoped>
	page,
	.index {
		height: 100%;
	}

	.canvas-hide {
		/* 1 */
		position: fixed;
		right: 100vw;
		bottom: 100vh;
		/* 2 */
		z-index: -9999;
		/* 3 */
		opacity: 0;
	}

	.index {
		position: relative;
		text-align: center;
		background: rgba($color: grey, $alpha: 0.2);
	}

	image {
		display: block;
	}

	.img {
		width: 600rpx;
		height: 720rpx;
	}
</style>